<template>
    <div class="operate-bars x-grid text-center">
        <div class="small-12 cell">
            <template
                    v-if="!isGaming"
            >
                <button
                        class="start"
                        @click="$emit('start-game')"
                        key='start'
                >
                    start new game
                </button>
            </template>
            <template v-else>
                <button
                        class="attack"
                        @click="$emit('attack')"
                >
                    attack
                </button>
                <button
                        class="special-attack"
                        @click="$emit('special-attack')"
                >
                    special attack
                </button>
                <button
                        class="heal"
                        @click="$emit('heal')"
                >
                    heal
                </button>
                <button
                        class="give-up"
                        @click="$emit('give-up')"
                >
                    give up
                </button>
            </template>
        </div>
    </div>
</template>

<script>

export default {
  name: "operate-bars",
  props: ["isGaming"]
}
</script>

<style lang="less" scoped>
    .operate-bars {
        border: 2px solid rgba(128, 128, 128, 0.5);
        border-radius: 10px;
        width: 80%;
        margin: 50px auto;
        button {
            width: 200px;
            height: 35px;
            margin: 20px 20px;
            border-radius: 10px;
            outline: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.1s linear;
            &.start {
                background-color: #aeffff;
                color: #00bbbb;
                &:hover {
                    background-color: #00bbbb;
                    color: #aeffff;
                }
            }
            &.attack {
                background-color: #ff8080;
                color: #860000;
                &:hover {
                    background-color: #860000;
                    color: #ff8080;
                }
            }
            &.special-attack {
                background-color: #00abfd;
                color: #0074ac;
                &:hover {
                    background-color: #0074ac;
                    color: #00abfd;
                }
            }
            &.heal {
                background-color: #b7e695;
                color: #138a23;
                &:hover {
                    background-color: #138a23;
                    color: #b7e695;
                }
            }
            &.give-up {
                background-color: #aab3b8;
                color: #616061;
                &:hover {
                    background-color: #616061;
                    color: #aab3b8;
                }
            }
        }
    }
</style>
